<template>
  <v-container app>
    <v-content>
      <div id="echarts1" :style="{ width: '400px', height: '300px' }"></div>
    </v-content>
  </v-container>
</template>

<script>
export default {
  name: 'echarts1',
  data () {
    return {
      echarts: null
    }
  },
  mounted () {
    this.draw()
  },
  beforeDestroy () {
    if (!this.echarts) {
      return
    }
    this.echarts.dispose()
    this.echarts = null
  },
  methods: {
    draw () {
      this.echarts = this.$echarts.init(document.getElementById('echarts1'))

      this.echarts.setOption({
        title: { text: '在VUE中使用echarts1' },
        tooltip: {},
        xAxis: {
          data: ['1月', '2月', '3月', '4月', '5月']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [10, 12, 9, 15, 10]
        }]
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
